<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--引入字体图标-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: PingFang SC, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Microsoft Yahei, \\5FAE软雅黑, STHeiti, \\534E文细黑, sans-serif;
            background: #302a34;
        }
        div {
            display: block;
        }
        .navbar-brand{
            width: 190px;
            height: 60px;
            margin: 9px 0;
            background-image: url("https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/site-brand.png");
        }
        .head_1{
            width: 100%;
            /*固定定位*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-repeat: repeat-x;
            z-index: 20;
        }
        .head_1>div{
            text-align: center;
            margin: 0 auto;
            display: block;
        }
        .navbar{
            width: 100%;
            height: 80px;
            background-color: #444250;
            border: 0;
            color: white;
        }
        header{
            width: 100%;
            height: 80px;
            background-color: #444250;
            border: 0;
            position: absolute;
            /*绝对定位的元素相对于窗口做位置偏移*/
            top: 0;
            left: 0;
            color: white;
        }
        .nav>li>a{
            padding: 20px 15px;
            font-size: 14px;
            line-height: 40px;
            color: white;
        }
        #title_index1{
            background: #c30e23;
            color: #dfd1b5;
            padding-left: 28px;
            padding-right: 28px;
        }
        .nav>li>a:hover{
            background-color: #666666;
            color: white;
        }
        .nav>li>a:focus{
            background: #c30e23;
            color: #dfd1b5;

        }
        #title_index1:hover{
            background-color: #666666;
        }
        .item{
            width:100%;
            min-height:100%;
            position:fixed;
            top:0;
            left:0;
        }
        .item>img{
            display:none;
        }
        #carousel_1{
            margin-top: 80px;
        }
        .navbar-nav{
            float: right;
        }
        #cent_1{
            margin: 0 auto;
        }
        .bod_y1>h1{
            color: #c30d23;
            height: 34px;
            line-height: 26px;
            width: 145px;
            text-align: center;
            font-size: 20px;
            margin: 0 auto;
            padding: 4px 5px;
            background: #dfd1b5;
            border-radius: 50px;
        }
        .bod_y1{
            text-align: center;
            padding: 20px 0;
        }
        .bod_y2 div{
            float: left;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            background-color: #a20d1f;
            border: none;
            margin: 0 auto;
        }
        h2{
            color: #dfd1b5;
            font-size: 18px;
            font-weight: 200;
            text-align: center;
            margin-top: 15px;
            line-height: 1.8;
        }
        .caption>p{
            color: #dfd1b5;
            font-size: 14px;
            font-weight: 200;
            text-align: center;
            padding: 20px;
            line-height: 1.8;
            margin: 0;
        }
        .bod_y3 div{
            background-color: #302a34;
            float: left;
            text-align: left;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            border: none;
            margin: 0 auto;
        }
        .im_g3 ul,.im_g3 ul li a{
            color: #dfd1b5;
            text-align: left;
            line-height: 22px;
            list-style-type: none;
            padding: 0;
        }
        .im_g3 ul li a{
            text-decoration: none;
        }
        #tex1{
             width: 100%;
             outline: 0;
             background-color: #666666;
             font-size: inherit;
             color: #fff;
             border: 0;
             position: relative;
             padding: 10px 0 10px 35px;
         }
        .i1{
            background-image: url();
            width: 22px;
            height: 22px;
            background-size: 22px;
            background-repeat: no-repeat;
            background-position: center bottom;
            cursor: pointer;
            display: inline-block;
            position: absolute;
            left: 25px;
            top: 12px;
        }
        .butt1{
            right: 16px;
            width: 68px; height: 38px;
            background: #dfd1b5;
            color: #302a34;
            border: none;
            padding: 9px 20px;
            font-size: 14px;
            /*cursor: pointer;
            font-weight: 200;*/
            position: absolute;
            top: 0;

        }
        .bodd1,.bodd2{
            float: left;
            margin-right: 20px;
        }
        .bodd1>h4,.bodd2>a{
            font-size: 18px;
            color: #dfd1b5;
            list-style-type: none;
        }
        .bodd1>span,.bodd2>p{
            font-size: 14px;
            color: #dfd1b5;
            list-style-type: none;
        }
        .bod1{
            padding-top: 15px;
        }
        .im_g3>ul>li>a:hover,.bodd2>a:hover{
            color: red;
            text-decoration: none;
        }
        .im_g4{
            width: 43px;
            height: 50px;

            left: 0;
            position: absolute;
            top: 0;
        }
        .hh3{
            float: left;
            font-weight: 200;
            color: #dfd1b5;
            font-size: 16px;
            line-height: 30px;
            margin: 0;
            padding-left: 20px;
        }
        .las_d{

            min-height: 1px;
            padding: 15px 10px 10px 50px;
            position: relative;
            float: left;
            overflow: hidden;
            margin: 20px;
        }
        .flo1{
            overflow: hidden;
        }
        footer>div{
            padding: 50px 0;
        }
        footer>div>div{
            text-align: center;
            line-height: 1.8;
            font-size: 12px;
            color: #f6f5f5;
            font-weight: 200;
        }
        .container{
            padding: 0;
        }
    </style>
</head>
<body>
<header class="head_1">
    <div class="container">
        <nav class="navbar navbar-default container" id="cent_1">
            <div class="container-fluid" >
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-header navbar-left">
                    <a class="navbar-brand"></a>
                </div>
                <ul class="nav navbar-nav navbar-right" style="list-style-type: none">
                    <li><a style="color: #ffc600" href="index.html" id="title_index1">首页</a></li>
                    <li><a style="color: white" href="food.html">招牌美食</a></li>
                    <li><a style="color: white" href="join.html">招商加盟</a></li>
                    <li><a style="color: white" href="profile.html">企业概况</a></li>
                    <li><a style="color: white" href="about.html">联系我们</a></li>
                    <li><a style="color: white" href="/reg.html">加入我们</a></li>
                    <li><a style="color: white" href="/login.html">管理员入口</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>
<section id="carousel_1">
    <div  style="width: 1360px" class="container">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/banner/slider-1.jpg" alt="First slide">
                </div>
                <div class="item">
                    <img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/banner/slider-2.jpg" alt="Second slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</section>
<section style="background-color: #c30d23">
    <div class="bod_y1">
        <h1>品牌特色</h1>
    </div>
    <div class="container">
        <div class="container">
            <div class="col-md-4 bod_y2">
                <div class="thumbnail">
                    <img style="width:192px;height:192px" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/icon-1.png">
                    <div class="caption">
                        <h2>口味<br>KOUWEI</h2>
                        <p>味道要经过沉淀才能成熟主烤官项目以中创永信（北京）食品科学研究院13年如一日从原料，腌料，串法，烤法，蘸料多方面潜心钻研。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 bod_y2">
                <div class="thumbnail">
                    <img style="width:192px;height:192px" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/icon-2.png">
                    <div class="caption">
                        <h2>品味<br>PINWEI</h2>
                        <p>不平庸，不盲从，不怕错敢去做是90后和00后的时代特征，主烤官从青春的品牌故事，创新的菜品口味，亮眼的包装，多个方面为年轻群体打造属于自己的烧烤店。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 bod_y2">
                <div class="thumbnail">
                    <img style="width:192px;height:192px" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/icon-3.png">
                    <div class="caption">
                        <h2>回味<br>HUIWEI</h2>
                        <p>再好的青春，回忆的次数多了味道也就淡了。主烤官用心将青春的味道化作一道道美食完整的保留下来，为每位食客记录记忆中的青春，让每次回忆逗有滋有味。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section style="background-color: #302a34">
    <div>
        <div class="bod_y1">
            <h1 style="color: #302a34">新闻</h1>
        </div>
        <div class="container">
            <div class="container row" style="background-color: #302a34">
                <div class="col-md-5 bod_y3">
                    <div class="thumbnail">
                        <img style="width:287px;height:146px;margin: 0" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/bj/news.jpg">
                        <div class="caption im_g3">
                            <ul>
                                <li><a href="news-page.html" style="font-size: 18px">烤天下成都新店开张</a></li>
                                <li><p style="font-size: 16px">个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 8020113</p></li>
                                <li><p style="font-size: 22px">04-20</p></li>
                                <li><p style="font-size: 16px">2017</p></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-7 bod_y3">
                    <input id="tex1" type="text" placeholder="搜索以前的文章">
                    <i class="i1"></i>
                    <input class="butt1" type="button" value="搜索">
                    <div class="bod1 row">
                        <div class="bodd1 col-md-2">
                            <h4>05-16</h4>
                            <span>2017</span>
                        </div>
                        <div class="bodd2 col-md-10">
                            <a href="news-page.html">烤天下创始人做客2017央视元宵晚会</a>
                            <p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 010-8020113</p>
                        </div>
                    </div>
                    <div class="bod1">
                        <div class="bodd1 col-md-2">
                            <h4>04-12</h4>
                            <span>2017</span>
                        </div>
                        <div class="bodd2 col-md-10">
                            <a href="news-page.html">夏天烧烤季 你的舌尖归我们</a>
                            <p>如何让烧烤爱好者们从路边摊挪到干净的厅堂里吃烧烤？这是一个餐饮习惯的迁移问题，要打通迁移的通道</p>
                        </div>
                    </div>
                    <div class="bod1">
                        <div class="bodd1 col-md-2">
                            <h4>04-08</h4>
                            <span>2017</span>
                        </div>
                        <div class="bodd2 col-md-10">
                            <a href="news-page.html">做品牌，跳出套路才更有价值</a>
                            <p>一个有生命力的品牌对于用户群体来说像一块具有内循环功能的海绵，不断的吸收，然后反作用于自身来变得更强大，从而达到更大的体量</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section style="background-color: #a20d1f">
    <div class="container flo1">
        <div class="las_d">
            <img class="im_g4" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-1.png">
            <h3 class="hh3">半成品输出，极速配送</h3>
        </div>
        <div class="las_d">
            <img class="im_g4" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-2.png">
            <h3 class="hh3">优质产地，严格品控</h3>
        </div>
        <div class="las_d">
            <img class="im_g4" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-3.png">
            <h3 class="hh3">品类齐全，口味丰富</h3>
        </div>
        <div class="las_d">
            <img class="im_g4" src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-4.png">
            <h3 class="hh3">菜品创新，活动迭代</h3>
        </div>
    </div>
</section>
<footer style="background-color: #302a34">
    <div>
        <div>©AUI 素材网 京ICP备15006025号-1</div>
        <div>
            "Copyright © 2012-2016 www.a-ui.cn"
            <span>地址：北京市海淀区北三环西路43号中航广场6层</span>
        </div>
    </div>
</footer>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>